<template>
	<view class="content">
		<!-- 无收货地址 -->
		<view class="shop_address" v-if="!addressList">
			<u-action-sheet
				:actions="list"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				@select="selectClick"
				:title="title"
				:show="show"
			></u-action-sheet>
			<text @click="show = true">设置收货地址</text>
			<image src="../../static/shopcart/line.jpg" mode=""></image>
		</view>

		<!-- 有收货地址 -->
		<view class="shop_address" v-else="addressList">
			<u-action-sheet
				:actions="list"
				:closeOnClickOverlay="true"
				:closeOnClickAction="true"
				@select="selectClick"
				:title="title"
				:show="show"
			></u-action-sheet>
			<text @click="show = true" class="geren_list">
				<view class="geren">
					<text>{{ addressList.realName }}</text>
					<text>{{ addressList.phone }}</text>
				</view>
				<view class="moren_address">
					<text class="moren">[默认]</text>
					<text>{{ address }}</text>
				</view>
			</text>
			<image src="../../static/shopcart/line.jpg" mode=""></image>
		</view>

		<!-- 付款商品 -->
		<view class="shop_buy">
			<text class="shop_total">共{{ shoppList.length }}件商品</text>
			<view
				class="goods_shop"
				v-for="(item, index) in shoppList"
				:key="index"
			>
				<view class="shop_img">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shop_name">
					<view class="shop_info">
						<text>{{ item.productName }}</text>
						<text>{{ item.sku }}</text>
					</view>
					<view class="shop_price_num">
						<text class="shop_price">￥{{ item.price }}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 下单操作 -->
		<view class="shop_init_info">
			<!-- 优惠卷 -->
			<view>
				<u-popup
					:show="show1"
					@close="close"
					@open="open"
					:closeOnClickOverlay="true"
				>
					<view>
						<u-empty
							mode="coupon"
							icon="http://cdn.uviewui.com/uview/empty/coupon.png"
						></u-empty>
					</view>
				</u-popup>
				<u-button @click="show1 = true">优惠券</u-button>
			</view>
			<!-- 积分 -->
			<view class="inte">
				<text>积分抵扣</text>
				<text class="init_now">
					当前积分{{ addressList.userIntegral }}
				</text>
			</view>
			<!-- 快递 -->
			<view class="express">
				<text>快递费用</text>
				<text class="express_money">免运费</text>
			</view>
			<!-- 备注信息 -->
			<view class="remark">
				<text class="remark_txt">备注信息</text>
				<u--textarea
					v-model="value"
					placeholder="请添加备注(150字以内)"
					count
					maxlength="150"
				></u--textarea>
			</view>
		</view>

		<!-- 支付方式 -->
		<view class="zhifu">
			<text class="zhifu_manner">支付方式</text>
			<view
				:class="{
					changered1: isChangeed1,
					wx_zhifu: true
				}"
				@click="wx_click"
			>
				<u-icon
					name="weixin-circle-fill"
					color="green"
					size="25px"
					label="微信支付"
				></u-icon>
				<text>微信快捷支付</text>
			</view>
			<view
				:class="{
					changered2: !isChangeed1,
					ye_zhifu: true
				}"
				@click="ye_click"
			>
				<u-icon
					name="rmb-circle-fill"
					color="orange"
					size="25px"
					label="余额支付"
				></u-icon>
				<text>可用余额:{{ addressList.userBalance }}</text>
			</view>

			<!-- 商品总价 -->
			<view class="shop_total">
				<text class="shop_total_text">商品总价：</text>
				<text>￥{{ total }}</text>
			</view>

			<!-- 立即结算 -->
			<view class="jiesuan">
				<text class="heji">合计:￥{{ total }}</text>
				<u-button
					text="立即结算"
					shape="circle"
					type="error"
					class="pay_btn"
					color="red"
					@click="nav"
				></u-button>
			</view>
		</view>
	</view>
</template>

<script>
//引入接口
import {
	getDefaultAddress,
	getShopCartPag,
	getOrderLoad,
	getOrderId,
	orderPrice
} from "../../network/shoppingCart.js";
export default {
	data() {
		return {
			title: "选择地址",
			//收货地址
			list: [
				{
					name: "陕西省西安市未央区"
				},
				{
					name: "甘肃省兰州市西固区"
				}
			],
			isChangeed1: false,
			show1: false, //优惠券
			show: false, //收货地址
			value: "", //统计字数
			addressList: {},
			address: "", //收货地址
			shoppingCartId: "", //购物车id
			shoppCart: [], //购物车数据
			shoppList: [], //订单详情
			preOrderNo: "", //商品id
			info: {
				addressId: "", //地址id
				preOrderNo: "" //商品id
			},
			total: "" //商品总价
		};
	},
	created() {
		// this.getAddress()
		this.getOrder();

		this.orderPriceCount();
	},

	methods: {
		//优惠券
		close() {
			this.show1 = !this.show1;
			// console.log('close');
		},
		open() {
			// this.show = false
			// console.log('close');
		},
		//获取订单商品
		async getOrder() {
			//获取购物车id
			let result = await getShopCartPag();
			console.log(result);
			let shoppCart = result.data.list;
			for (let i = 0; i < shoppCart.length; i++) {
				this.shoppingCartId = result.data.list[i].id;
			}
			console.log(this.shoppingCartId);

			//获取商品id
			let res = await getOrderId({
				orderDetails: [
					{
						shoppingCartId: this.shoppingCartId
					}
				],
				preOrderType: "shoppingCart"
			});
			this.info.preOrderNo = res.data.preOrderNo;
			console.log(this.preOrderNo);

			let response = await getOrderLoad(this.info.preOrderNo);
			console.log(response);

			this.addressList = response.data.orderInfoVo;
			this.info.addressId = response.data.orderInfoVo.addressId;

			//地址
			this.address = `${this.addressList.province}${
				this.addressList.city
			}${this.addressList.district}${this.addressList.detail}`;
			//商品详情
			this.shoppList = this.addressList.orderDetailList;
			for (let i = 0; i < this.shoppList.length; i++) {
				this.total = this.shoppList[i].price;
			}
			console.log(this.shoppList);
		},

		//计算订单价格
		async orderPriceCount() {
			console.log(this.preOrderNo);
			let res = await orderPrice({
				addressId: this.addressList.addressId,
				preOrderNo: this.preOrderNo,
				shippingType: 1,
				useIntegral: false
			});
			console.log(res);
		},

		//收货地址
		selectClick(index) {
			this.show = !this.show;
		},
		//优惠券
		selectClick1(index) {
			this.show1 = !this.show1;
			// console.log(index)
		},
		//微信支付
		wx_click() {
			this.zhifuColor = !this.zhifuColor;
			this.isChangeed1 = !this.isChangeed1;
		},
		//余额支付
		ye_click() {
			this.zhifuColor = !this.zhifuColor;
			this.isChangeed1 = !this.isChangeed1;
		},
		// computed: {
		// 	total() {
		// 		return this.total
		// 	}
		// },
		//立即结算跳转
		nav() {
			console.log(encodeURIComponent(JSON.stringify(this.info)));
			uni.navigateTo({
				url:
					"../../subpackages/shoppingCart/paySuccess?info=" +
					encodeURIComponent(JSON.stringify(this.info))
			});
		}
	}
};
</script>

<style lang="scss">
.content {
	//收获地址
	.shop_address {
		image {
			width: 100%;
			height: 1rpx;
			margin-top: -200rpx;
		}

		.geren_list {
			display: flex;
			flex-direction: column;
			padding: 10rpx 20rpx;

			.geren {
				margin: 15rpx 0;
				font-weight: bold;

				text {
					margin-right: 20rpx;
				}
			}

			.moren_address {
				.moren {
					color: red;
					margin-right: 5rpx;
				}
			}
		}
	}

	//购买商品
	.shop_buy {
		width: 100%;
		// margin-top: 20rpx;
		padding: 15rpx;

		.shop_total {
			margin: 20rpx 0 15rpx 0;
		}
	}

	.shop_init_info {
		padding: 15rpx;

		//积分
		.inte {
			border-bottom: 1px solid #ccc;
			height: 70rpx;
			line-height: 70rpx;

			.init_now {
				// margin-left: 450rpx;
				float: right;
			}
		}

		//快递费
		.express {
			border-bottom: 1px solid #ccc;
			height: 70rpx;
			line-height: 70rpx;

			.express_money {
				// margin-right: 490rpx;
				float: right;
			}
		}

		//备注
		.remark {
			border-bottom: 1px solid #ccc;
			// height: 70rpx;
			line-height: 70rpx;
		}
	}

	//支付
	.zhifu {
		// display: inline-block;
		display: flex;
		flex-direction: column;
		padding: 0rpx 15rpx;
		margin-top: 10rpx;
		.wx_zhifu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 7vh;
			padding: 0 5vw;
			border: 1px solid #ccc;
			border-radius: 20rpx;
		}

		.changered1 {
			color: red;
			border: 1px solid red;
		}

		.ye_zhifu {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 7vh;
			padding: 0 5vw;
			margin-top: 2vh;
			border: 1px solid #ccc;
			border-radius: 20rpx;
		}

		.changered2 {
			color: red;
			border: 1px solid red;
		}
	}

	//总价
	.shop_total {
		display: flex;
		justify-content: space-between;
		margin: 15rpx 0;

		.shop_total_text {
			// margin-right: 500rpx;
		}
	}

	//结算
	.jiesuan {
		display: flex;
		margin: 15rpx 0;
		justify-content: space-between;

		.pay_btn {
			width: 30vw;
			height: 5vh;
			padding: 10px;
			font-size: 12px;
		}

		.heji {
			margin-right: 460rpx;
		}
	}

	// .total {
	// 	width: 100%;
	// 	display: block;
	// 	border-bottom: 1px solid #ccc;
	// }

	//付款商品信息
	.goods_shop {
		display: flex;

		.shop_img {
			display: flex;
			padding-left: 15rpx;

			image {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.shop_name {
			display: flex;
			flex-direction: column;
			padding-top: 30rpx;
			margin-left: 40rpx;

			.shop_info {
				display: flex;
				flex-direction: column;

				text {
					margin-bottom: 10rpx;
					font-size: 13px;
					width: 390rpx;
				}
			}

			.shop_price_num {
				display: flex;
				.shop_price {
					color: #e93323;
					font-size: 15px;
					font-weight: bold;
					margin-right: 100rpx;
				}
			}
		}
	}
}
</style>
